<template>
  <div class="app-container" v-loading="pageLoading">
    <div class="filter-container">
      <el-select class="filter-item" style="width: 120px;" @change="research" v-model="query.piletype"
        placeholder="电堆类型" filterable clearable>
        <el-option v-for="(i,t) in piletypeOptions" :key='t' :value="i.value" :label="i.label"></el-option>
      </el-select>
      <el-input style="width: 200px;" placeholder="输入查询关键字按回车" clearable prefix-icon="el-icon-search"
        class="filter-item" @keyup.enter.native="research" @clear="research" v-model="query.toolingcode"></el-input>
      <el-date-picker class="filter-item" style="width: 230px;" v-model="query.daterange" type="daterange"
        @change="research" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"
        :picker-options="datePickerOption">
      </el-date-picker>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
    </div>
    <z-Table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template #content="{row,key}">
        <div v-if="key=='res_code'">
          <span class="text-label" :class="row[key]=='OK'?'bg-green':'bg-yellow'">
            {{row[key]}}
          </span>
        </div>
        <div v-else-if="key=='pile_type'">
          <span>
            {{row[key] == 1? '母电堆' : '子电堆'}}
          </span>
        </div>
      </template>
      <template #operation="{row}">
        <a href="#" v-permission="'pileTest.edit'" class="text-red" v-if="row.pile_type !== '1' "
          @click.prevent.stop="release(row)">物料解绑</a>
        <a href="#" class="text-red" v-else>{{'　　　　'}}</a>

      </template>
    </z-Table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'pileTest',
  data: function () {
    return {
      name: '母/子电堆测试记录',
      api: this.$api.fuelCell,
      apiList: this.$api.fuelCell + 'GetFcPileTestList',
      columns: [
        { title: '工单号', key: 'mo_no', width: 180 },
        { title: '测试设备编号', key: 'test_machine', width: 120 },
        { title: '电堆类型', key: 'pile_type', width: 80 },
        { title: '载具编号', key: 'tooling_code', width: 110 },
        { title: '压力值', key: 'item1', width: 110 },
        { title: '高度', key: 'item2', width: 80 },
        { title: '泄露测试气压', key: 'item3', width: 110 },
        { title: '泄露测试外泄流量', key: 'item4', width: 150 },
        { title: '泄露测试腔室1内泄流量', key: 'item5', width: 150 },
        { title: '泄露测试腔室2内泄流量', key: 'item6', width: 150 },
        { title: '泄露测试结果', key: 'res_code', width: 100 },
        { title: '测试时间', key: 'create_time', width: 150 },
      ],
      tableProps: {
        border: true,
        //opsColWith: 140, //不定义默认80
        hideOperations: false,
      },
      query: {
        page: 1,
        size: 10,
        daterange: [],
      },
      piletypeOptions: [
        {
          label: '母电堆',
          value: 1,
        },
        {
          label: '子电堆',
          value: 2,
        },
      ],
      datePickerOption: {
        shortcuts: [
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '当月',
            onClick(picker) {
              let today = dateTools.FormatDate()
              const end = today
              const start = dateTools.first_day(today)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '上月',
            onClick(picker) {
              let today = dateTools.FormatDate()
              const start = dateTools.first_day(dateTools.add_month(today, -1))
              const end = dateTools.last_day(start)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '上上月',
            onClick(picker) {
              let today = dateTools.FormatDate()
              const start = dateTools.first_day(dateTools.add_month(today, -2))
              const end = dateTools.last_day(start)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
    }
  },
  methods: {
    formatQuery(query) {
      let tmp = _.cloneDeep(query)
      if (tmp.daterange) {
        tmp.begintime = tmp.daterange[0]
        tmp.endtime = tmp.daterange[1]
        delete tmp.daterange
      }
      return tmp
    },
    release(row) {
      this.$confirm('即将解除载具编号为 ' + row.tooling_code + ' 的绑定,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const { tooling_code } = row
          this.$request(this.api + 'ReleaseFcPileTest', { tooling_code }, 'post').then((r) => {
            this.$message.success('解除成功')
            this.getList()
          })
        })
        .catch(() => {})
    },
  },
  created: function () {
    this.getList()
  },
  watch: {},
}
</script>

<style scoped>
</style>
